<template>
  <div>
    <div style="padding-bottom: 10px">
      <el-button
        v-for="(item, index) in AssignOrderBtns"
        :key="index"
        type="primary"
        plain
        style="margin: 10px; margin-top: 5px"
        @click="doAssignOrder(item)"
      >
        {{ item.AssignOrderTargetName }}
      </el-button>
    </div>
    <div style="padding-bottom: 10px">
      <el-table
        v-loading="listLoading"
        :data="WorkTaskList"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          label="ID"
          prop="WorkTaskID"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column align="center" label="分单目标" width="200">
          <template #default="{ row }">{{ row.TaskTargetName }}</template>
        </el-table-column>
        <el-table-column align="center" label="指派接单人" width="100">
          <template #default="{ row }">{{ row.TaskStaffName }}</template>
        </el-table-column>
        <el-table-column align="center" label="派单时间" width="200">
          <template #default="{ row }">{{ row.AddTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="任务" width="120">
          <template #default="{ row }">{{ row.ProductName }}</template>
        </el-table-column>
        <el-table-column align="center" label="指定店铺/账号">
          <template #default="{ row }">{{ row.BindStoreAccount }}</template>
        </el-table-column>
        <el-table-column align="center" label="接单状态" width="100">
          <template #default="{ row }">
            <div v-if="row.AssignOrderSetID == 1 || row.AssignOrderSetID == 4">
              <el-text v-if="row.TaskState == 0" type="danger">待分单</el-text>
              <el-text v-if="row.TaskState == 1" type="success">已分单</el-text>
            </div>
            <div v-else>
              <el-text v-if="row.TaskState == 0" type="danger">待接单</el-text>
              <el-text v-if="row.TaskState == 1" type="success">已接单</el-text>
              <el-text v-if="row.TaskState == 2" type="warning">待审核</el-text>
              <el-text v-if="row.TaskState == 3" type="success">已审核</el-text>
              <el-text v-if="row.TaskState == -2" type="warning">
                已更换
              </el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template #default="{ row }">
            <el-button
              v-if="row.flag"
              type="success"
              size="small"
              @click="doAssignTaskList(row)"
            >
              <span v-if="row.isList == 0">修改</span>
              <span v-else>任务清单</span>
            </el-button>
            <el-button
              v-if="row.flag && row.TaskState == 0"
              type="danger"
              size="small"
              @click="cancelTaskList(row)"
            >
              取消分单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <assign-order ref="assignOrderRef" />
    <!-- <assign-operate ref="assignOperateRef" />
    <assign-designer ref="assignDesignerRef" />
    <assign-videoer ref="assignVideoerRef" />
    <assign-zonghe ref="assignZongheRef" /> -->
  </div>
</template>

<script>
  import { getAssignOrderBtns, cancelWorkTask } from '@/api/worktask'
  import AssignOrder from '@/views/business/components/AssignOrder'
  // import AssignOperate from '@/views/business/components/AssignOperate'
  // import AssignDesigner from '@/views/business/components/AssignDesigner'
  // import AssignVideoer from '@/views/business/components/AssignVideoer'
  // import AssignZonghe from '@/views/business/components/AssignZonghe'

  export default defineComponent({
    name: 'OrderAssign',
    components: {
      AssignOrder,
      // AssignOperate,
      // AssignDesigner,
      // AssignVideoer,
      // AssignZonghe,
    },
    props: {
      actstffpostid: {
        type: Number,
        default: 0,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      // const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        flag: true,
        OrderID: 0,
        listLoading: false,
        assignOrderRef: null,
        assignDesignerRef: null,
        assignVideoerRef: null,
        assignZongheRef: null,
        ProductList: [],
        StoreList: [],
        WorkTaskList: [],
        AssignOrderBtns: [],
      })

      const showList = (orderid, ProductList, StoreList, list, GiftList) => {
        console.log(GiftList, 'GiftListGiftListGiftList')

        state.GiftList = GiftList
        state.OrderID = orderid
        getAssignOrderBtn()
        state.ProductList = []
        state.ProductList = ProductList
        state.StoreList = StoreList
        state.WorkTaskList = list
      }

      const doAssignOrder = (item) => {
        state.assignOrderRef.showEdit(
          state.OrderID,
          item,
          state.ProductList,
          {},
          state.GiftList
        )
      }
      const cancelTaskList = async (row) => {
        const { msg } = await cancelWorkTask({
          WorkTaskID: row.WorkTaskID,
          state: 0,
        })
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        emit('fetch-data')
      }

      const doAssignTaskList = (row) => {
        const item = state.AssignOrderBtns.find(
          (itm) => itm.AssignOrderSetID === row.AssignOrderSetID
        )

        state.assignOrderRef.showEdit(
          state.OrderID,
          item,
          state.ProductList,
          row,
          state.GiftList
        )
      }
      const getAssignOrderBtn = async () => {
        state.listLoading = true
        const flow = {
          OrderID: state.OrderID,
          OrderFlowState: 5,
        }
        const {
          data: { AssignOrderBtns },
        } = await getAssignOrderBtns(flow)
        state.AssignOrderBtns = AssignOrderBtns

        state.WorkTaskList.forEach((row) => {
          const Msg = state.AssignOrderBtns.find(
            (itm) => itm.AssignOrderSetID === row.AssignOrderSetID
          )
          if (Msg) {
            row.flag = true
          } else {
            row.flag = false
          }
        })

        console.log(state.WorkTaskList, '   state.WorkTaskList')

        console.log(AssignOrderBtns, 'AssignOrderBtnsAssignOrderBtns')
        state.listLoading = false
      }

      return {
        ...toRefs(state),
        showList,
        doAssignOrder,
        doAssignTaskList,
        cancelTaskList,
      }
    },
  })
</script>
